<template>
	<view class="content">
		<NavbarView></NavbarView>

		<view class="swiper-view">
			<u-swiper :list="list" :height="600"></u-swiper>
		</view>

		<view class="list-content-view config-title" v-for="(item,index) in menuList" :key="index">
			<view class="menu-title-view">
				<view class="menu-title-text">
					{{item.label}}
				</view>
				<view class="menu-item-view">
					<view class="view-text">
						历史
					</view>
					<view class="view-line"></view>
					<view class="view-text">
						人文
					</view>
					<view class="view-line"></view>
					<view class="view-text">
						社科
					</view>
					<view class="view-line"></view>
					<view class="view-text">
						商业
					</view>
					<view class="view-line"></view>
					<view class="view-text">
						更多
					</view>
				</view>
			</view>
			<view class="menu-content-view config-title">
				<view class="menu-left-view" @tap.stop="goDetail">
					<view class="book-title">理想国（汉译世界学术名著丛书）</view>
					<view class="autor">作者:柏拉图</view>
					<view class="instroduce-text">
						柏拉图的《理想国》探讨了许多重要的主题，如正义、政治、教育和哲学。他通过对话的方式，引导读者思考关于国家的管理、个人责任和社会秩序等问题。这本书对于理解古希腊哲学和政治思想的发展具有重要意义，也对后世的政治哲学和社会学产生了深远的影响。
					</view>
					<view class="image-view">
						<image class="logo-image"
							src="https://wfqqreader-1252317822.image.myqcloud.com/cover/243/33889243/t6_33889243.jpg"
							mode=""></image>
					</view>
				</view>
				<view class="menu-middle-view">
					<view class="middle-view-item">
						<view class="book-item-view">
							<image class="book-image"
								src="https://cdn.weread.qq.com/weread/cover/39/YueWen_24284461/s_YueWen_24284461.jpg"
								mode=""></image>
							<view class="book-text1">经济学原理（超值白金版）</view>
							<view class="book-text2">马歇尔</view>
						</view>
						<view class="book-item-view">
							<image class="book-image"
								src="https://cdn.weread.qq.com/weread/cover/85/3300010685/s_3300010685.jpg" mode="">
							</image>
							<view class="book-text1">一地鸡毛（典藏版）</view>
							<view class="book-text2">刘震云</view>
						</view>
					</view>
					<view class="middle-view-item">
						<view class="book-item-view">
							<image class="book-image"
								src="https://wfqqreader-1252317822.image.myqcloud.com/cover/587/23303587/s_23303587.jpg"
								mode=""></image>
							<view class="book-text1">安徒生童话故事集</view>
							<view class="book-text2">安徒生</view>
						</view>
						<view class="book-item-view">
							<image class="book-image"
								src="https://wfqqreader-1252317822.image.myqcloud.com/cover/758/26406758/s_26406758.jpg"
								mode=""></image>
							<view class="book-text1">人间值得</view>
							<view class="book-text2">中村恒子 奥田弘美</view>
						</view>
					</view>
				</view>
				<view class="menu-right-view">
					<view class="right-title">
						畅销榜
					</view>
					<view class="bank-view">
						<view v-for="(item1,index1) in bookList" :key="index1" @mousemove="changeBook(index,index1)">
							<view v-if="item.index == index1" class="bank-view-list-sel">
								<view class="bank-book-id">{{item1.id}}</view>
								<image class="bank-book-image"
									src="https://bookbk.img.zhangyue01.com/idc_1/m_1,w_63,h_84,q_100/e3156511/group61/M00/ED/95/CmQUOV0jGRyEJoaVAAAAAALs4JQ223908335.jpg?v=K9HfzX46&t=CmQUOWLNLM4."
									mode=""></image>
								<view class="bank-books-right">
									<view class="bank-books-name-text">{{item1.name}}</view>
									<view class="books-see-view">
										<view><u-icon name="eye-fill" color="#9E9E9E" size="30"></u-icon></view>
										<view class="see-num-text">{{item1.see}}</view>
									</view>
								</view>
							</view>
							<view v-else class="bank-view-list">
								<view style="display: flex;">
									<view class="bank-book-id">{{item1.id}}</view>
									<view class="bank-book-name">{{item1.name}}</view>
								</view>
								<view style="display: flex;">
									<view><u-icon name="eye-fill" color="#9E9E9E" size="30"></u-icon></view>
									<view class="see-num-text">{{item1.see}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavbarView from '@/components/navbar-view/navbar-view.vue'
	export default {
		data() {
			return {
				list: [{
						image: '/static/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
									},
					{
						image: '/static/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
									},
					{
						image: '/static/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
									}
								],
				bookList: [
					{
						id: 1,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 2,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 3,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 4,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 5,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 6,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 7,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 8,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 9,
						name: '微水浮沉',
						see: 5622
					},
					{
						id: 10,
						name: '微水浮沉',
						see: 5622
					},
				],
				menuList: [
					{
						index: 0,
						label: '出版图书'
					},
					{
						index: 0,
						label: '有声读物'
					}
				],
				books: []
			}
		},
		components: { NavbarView },
		onLoad() {
			this.books = this.$api.books_list()
			// console.log('列表:', this.$api.books_list())
			// console.log('查询:', this.$api.books_get(1))
			// console.log('新增:', this.$api.books_create({ 'name': '新增一本书' }))
			// console.log('更新:', this.$api.books_update(1, { 'name': '更新书' }))
			// console.log('删除:', this.$api.books_delete(2))
		},
		onShow() {
			if (uni.getStorageSync('phone')) {
				this.menuList = [
					{
						index: 0,
						label: '出版图书'
					},
					{
						index: 0,
						label: 'AI推荐'
					},
					{
						index: 0,
						label: '有声读物'
					}
				]
			} else {
				this.menuList = [
					{
						index: 0,
						label: '出版图书'
					},
					{
						index: 0,
						label: '有声读物'
					}
				]
			}
		},
		methods: {
			changeBook(index,index1) {
				this.menuList[index].index = index1
			},
			goDetail() {
				window.open('#/pages/index/detail')
			},
		}
	}
</script>

<style>
	.swiper-view {
		width: 100%;
		height: auto;
	}

	.list-content-view {
		padding: 60rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.menu-title-view {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.menu-title-text {
		font-size: 60rpx;
	}

	.menu-item-view {
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.view-text:hover {
		color: red;
		cursor: pointer;
	}

	.view-line {
		margin: 0 10rpx;
		width: 2rpx;
		height: 28rpx;
		background-color: #9E9EB3;
	}

	.menu-content-view {
		background-color: #fff;
		display: flex;
		margin-top: 60rpx;
	}

	.menu-left-view {
		width: 33%;
		border-right: 1rpx solid #F0F0F0;
		padding: 60rpx 60rpx 40rpx;
	}

	.menu-middle-view {
		width: 33%;
		display: flex;
	}

	.menu-right-view {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 40rpx 80rpx;
	}

	.right-title {
		font-size: 40rpx;
		margin-bottom: 40rpx;
	}

	.bank-view {
		display: flex;
		flex-direction: column;
	}

	.bank-view-list-sel {
		display: flex;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #9E9EB3;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.bank-view-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #9E9EB3;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.bank-book-id {
		width: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bank-book-name {
		margin-left: 30rpx;
	}

	.bank-book-image {
		width: 63px;
		height: 84px;
		margin: 0 30rpx;
	}

	.bank-books-name-text {
		font-size: 24rpx;
		color: #000;
	}

	.books-see-view {
		display: flex;
		align-items: center;
		margin-top: 14rpx;
	}

	.see-num-text {
		margin-left: 10rpx;
	}

	.middle-view-item {
		flex: 1;
		border-right: 1rpx solid #F0F0F0;
		display: flex;
		flex-direction: column;
	}

	.book-item-view {
		flex: 1;
		padding: 60rpx;
		display: flex;
		flex-direction: column;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.book-image {
		width: 102px;
		height: 136px;
	}

	.book-text1 {
		width: 102px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 26rpx;
		margin: 14rpx 0 10rpx;
	}

	.book-text2 {
		font-size: 22rpx;
		color: #999;
	}

	.book-title {
		font-size: 32rpx;
	}

	.autor {
		font-size: 24rpx;
		font-weight: 300;
		margin-top: 20rpx;
	}

	.instroduce-text {
		font-size: 24rpx;
		font-weight: 300;
		margin-top: 40rpx;
	}

	.image-view {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 250rpx;
	}

	.logo-image {
		width: 158px;
		height: 208px;
	}
</style>